<!-- 
    watch
       watch(侦听属性, (newValue,oldValue)=>{
            侦听属性变化自动触发执行
       }) 

       1. 侦听属性是基本数据类型，直接侦听
       2. 侦听属性是对象属性，使用reactive声明响应式数据，侦听器watch中使用 ()=>{return 对象.属性}
-->
<template>
	<div>
		<h2>watch侦听器</h2>
		<input placeholder="请输入内容" v-model.lazy="inputValue" />
		<button @click="bindAddNum">num加一</button>
	</div>
</template>

<script setup>
import { watch, ref,reactive } from 'vue'
const inputValue = ref('')
const goods = reactive({ id: 1001, name: '回锅肉', price: 18.88, num: 1 })

/**
 * 侦听器
 */
watch(
	() => goods.num,
	(newValue, oldValue) => {
		console.log('goods newValue :', newValue, ' oldValue : ', oldValue)
	},
    { immediate: true } // 立即侦听
)

/**
 * 数量加一
 */
const bindAddNum = () => {
	goods.num++
}
</script>

<style lang="css" scoped></style>
